<script setup>
    const props = defineProps({
        tableData: Array,
    })
    console.log(props)

    const emit = defineEmits()

</script>

<template>
    <table id="MyTable" cellspacing="0">
        <thead>
            <tr>
                <slot name="thead"></slot>
            </tr>
        </thead>
        <tbody>
            <slot name="tbody" 
            :tableData="props.tableData"
            :e="emit"></slot>
        </tbody>
    </table>
    <p></p>
</template>

<style>
    #MyTable {
        border: 1px #ccc solid;
    }
    #MyTable td, th {
        width: 120px;
        height: 32px;
        border: 1px #ccc solid;
        text-align: center;
        line-height: 32px;
    }
    #MyTable th {
        background-color: rgb(39, 114, 248);
        color: aliceblue;
    }
    #MyTable td button {
        cursor: pointer;
    }
</style>